<!--  -->
<template>
    <div class="app-container">
        <div class="df">
            <el-button type="warning" icon="el-icon-edit" size="small" @click="add">添加</el-button>
        </div>
        <el-table :data="tableData" border stripe>
            <template v-for="(i, index) in columns">
                <el-table-column
                    v-if="index == 1"
                    :prop="i.data"
                    :key="i.id"
                    :label="i.label"
                    align="center"
                    :width="i.width"
                >
                    <template slot-scope="scope">
                        <el-image
                            class="slideImg"
                            :src="scope.row.image"
                            fit="fill"
                            :lazy="true"
                            :previewSrcList="[scope.row.image]"
                        ></el-image>
                    </template>
                </el-table-column>
                <el-table-column
                    v-else-if="index == 5"
                    :prop="i.data"
                    :key="i.id"
                    :label="i.label"
                    align="center"
                    :width="i.width"
                >
                    <template slot-scope="scope">
                        <el-switch
                            v-model="scope.row.isUsed"
                            :active-value="true"
                            :inactive-value="false"
                            @change
                        ></el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                    v-else
                    :prop="i.data"
                    :key="i.id"
                    :label="i.label"
                    align="center"
                    :width="i.width"
                ></el-table-column>
            </template>

            <el-table-column align="center" label="操作" width="200">
                <template slot-scope="scope">
                    <el-button type="primary" size="small" @click="edit(scope)">编辑</el-button>
                    <el-button type="danger" size="small" @click="del(scope)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="page">
            <el-pagination
                @size-change="sizeChange"
                @current-change="currentChange"
                :current-page.sync="page"
                :page-sizes="[20, 40, 80, 100]"
                :page-size="limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                background
            ></el-pagination>
        </div>

        <!-- 对话框 -->
        <el-dialog
            :title="dialogTitle"
            :visible.sync="showDialog"
            width="50%"
            @close="showDialog = false"
        >
            <el-form
                :model="form"
                ref="form"
                :rules="rules"
                label-width="120px"
                :inline="false"
                size="normal"
            >
                <el-form-item label="编号" prop="id">
                    <el-input v-model="form.id" style="width: 60%"></el-input>
                </el-form-item>
                <el-form-item label="引导页海报" prop="cover">
                    <el-upload
                        :action="$baseU+'platform/storage/uploads'"
                        :file="form.cover"
                        :before-upload="beforeCoverUpload"
                        list-type="picture-card"
                        accept="image/*"
                    >
                        <i class="el-icon-plus"></i>
                        <div slot="tip" class="el-upload__tip">
                            只能上传不超过 2MB 的image/*文件
                        </div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="引导页文案" prop="name">
                    <el-input v-model="form.name" style="width: 60%"></el-input>
                </el-form-item>
                <el-form-item label="是否启用" prop="status">
                    <el-switch
                        v-model="form.status"
                        :active-value="true"
                        :inactive-value="false"
                        @change
                    ></el-switch>
                </el-form-item>
                <el-form-item label="跳转链接" prop="url">
                    <el-input v-model="form.url" style="width: 60%"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click>立即创建</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import { create, list } from '@/api/base/platform.js';
export default {
    name: "slider",
    data () {
        return {
            time: "",
            dialogTitle: "创建",
            showDialog: false,
            page: 1,
            limit: 10,
            total: 10,
            tableData: [],
            form: "",
            rules: {
                id: [{ required: true }],
                cover: [{ required: true }],
                name: [{ required: true }],
                status: [{ required: true }],
                url: [{ required: true }]
            },
            columns: [
                { key: 0, label: `编号`, data: "id", visible: true, width: "80" },
                { key: 1, label: `引导页海报`, data: "image", visible: true },
                { key: 2, label: `引导页文案`, data: "introduce", visible: true },
                { key: 2, label: `跳过时间`, data: "sortOrder", visible: true, width: "100" },
                { key: 3, label: `跳转链接`, data: "herfType", visible: true, width: "250" },
                { key: 4, label: `是否启用`, data: "isUsed", visible: true, width: "100" }
            ]
        };
    },
    mounted () {
        this.getList()
    },
    methods: {
        getList () {
            list().then((r) => {
                if (r.code == '200') {
                    this.tableData = r.data.rows;
                } else if (r.code != '200') {
                    this.$message.error('数据请求失败！')
                }
            })
        },
        add () {
            this.showDialog = true;
        },
        edit () {
            this.showDialog = true;
        },
        del () {
            this.$confirm("确认删除所选数据？", "确认删除", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
                center: true
            })
                .then(() => {
                    this.$message.warning("删除成功！");
                    this.tableData.splice(i, 1);
                })
                .catch(() => { });
        },
        save () {
            this.$message.success('保存成功！')
        },
        refresh () {
            this.$message.success('重置成功！')
        },
        sizeChange () { },
        beforeCoverUpload () { },
        currentChange () { }
    }
};
</script>
<style scoped>
.df {
    margin-bottom: 15px;
}
.slideImg {
    width: 140px;
}
</style>
